@model DatabaseManager.Models.LoginViewModel
@{
    ViewData["Title"] = "登录";
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 数据库管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6 col-sm-8">
                <div class="card mt-5">
                    <div class="card-header text-center">
                        <h3>数据库管理系统</h3>
                        <p class="text-muted">请登录以继续</p>
                    </div>
                    <div class="card-body">
                        <form id="loginForm">
                            @Html.AntiForgeryToken()
                            <div id="errorMessage" class="alert alert-danger" style="display: none;"></div>
                            
                            <div class="mb-3">
                                <label asp-for="Username" class="form-label">用户名</label>
                                <input asp-for="Username" class="form-control" id="username" placeholder="请输入用户名" />
                                <span asp-validation-for="Username" class="text-danger"></span>
                            </div>
                            
                            <div class="mb-3">
                                <label asp-for="Password" class="form-label">密码</label>
                                <input asp-for="Password" type="password" class="form-control" id="password" placeholder="请输入密码" />
                                <span asp-validation-for="Password" class="text-danger"></span>
                            </div>
                            
                            <div class="mb-3 form-check">
                                <input asp-for="RememberMe" class="form-check-input" id="rememberMe" />
                                <label asp-for="RememberMe" class="form-check-label">记住我</label>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary" id="loginButton">登录</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#loginForm').on('submit', function(e) {
                e.preventDefault(); // 阻止默认表单提交
                
                // 获取表单数据
                var username = $('#username').val();
                var password = $('#password').val();
                var rememberMe = $('#rememberMe').is(':checked');
                var antiForgeryToken = $('input[name="__RequestVerificationToken"]').val();
                
                // 简单验证
                if (!username || !password) {
                    showError('请输入用户名和密码');
                    return;
                }
                
                // 禁用登录按钮，防止重复提交
                $('#loginButton').prop('disabled', true).text('登录中...');
                
                // AJAX 提交
                $.ajax({
                    url: '@Url.Action("Login", "Home")',
                    type: 'POST',
                    headers: {
                        'RequestVerificationToken': antiForgeryToken
                    },
                    data: {
                        __RequestVerificationToken: antiForgeryToken,
                        Username: username,
                        Password: password,
                        RememberMe: rememberMe
                    },
                    success: function(response) {
                        if (response.redirectUrl) {
                            // 登录成功，重定向
                            window.location.href = response.redirectUrl;
                        } else {
                            // 显示错误消息
                            showError(response.message || '登录失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        showError('登录请求失败，请重试');
                    },
                    complete: function() {
                        // 重新启用登录按钮
                        $('#loginButton').prop('disabled', false).text('登录');
                    }
                });
            });
            
            function showError(message) {
                $('#errorMessage').text(message).show();
                // 3秒后自动隐藏错误消息
                setTimeout(function() {
                    $('#errorMessage').hide();
                }, 3000);
            }
        });
    </script>
</body>
</html>